{include file="common/header" /}
<style>
    #yj_map_china {
        border:2px solid red;
        width: 80%;
        min-height: 1000px;
        position: fixed;
        left: 10%;
        top: 10px;
        padding: 0;
        margin: 0;
        min-width:100px ;
        z-index: 9;
    }

    #yj_map_china.slide-left{
        left:-5%;
        transition: 1s all ease;
    }

    .yj-food-scenery{
        background: #ccc;
        position: fixed;
        top:200px;
        width:250px;
        right:60px;
        z-index: 10;
    }
    .yj-food-scenery:hover{
        background: #ddd;
        transition: 1s all ease;
    }
    .yj-box{
        background: silver;
    }
    .yj-box-scenery{
        margin-top:20px;
    }

    .yj-box-title{
        text-align: center;
        background: #333;
        color:#eee;
        height:40px;
        line-height: 40px;
    }
    .yj-box-title:hover{
        background: black;
    }
</style>
<script type="text/javascript" src="/static/js/map/initmap.js?1"></script>
<div class="yj-func-map">
    <div id="yj_map_china"></div>
    <div class="yj-food-scenery">
        <div class="yj-box yj-box-food">
            <div class="yj-box-title">美食</div>
            <div class="yj-box-list" id="geo_food_list"></div>
        </div>
        <div class="yj-box yj-box-scenery">
            <div class="yj-box-title">风景</div>
            <div id="geo_scenery_list"></div>
        </div>
    </div>
</div>

{include file="common/footer" /}